<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="${layout} :: common_header(~{::title})">
    <title th:text="${pageTitle}">Home</title>
</head>

<body th:replace="${layout} :: common_body(~{::div.content-wraper})">


<div class="content-wraper">
    <div class="banner">
        <div class="swiper-container banner-container">
            <div class="swiper-wrapper banner-wrapper">
                <div class="swiper-slide" th:each="item:${banners}">
                    <a href="#" >
                        <img th:src="${item.imgUrl}" th:title="${item.title}" class="banner" alt="banner">
                    </a>
                </div>
            </div>
            <div class="swiper-pagination banner-pagination swiper-pagination-white"></div>
        </div>
    </div>
    <div class="container">
        <div class="swiper-box">
            <div class="title">
                <div class="center" th:if="${language.equals('en')}"><span>PRODUCTS</span></div>
                <div class="center" th:if="${language.equals('zh')}"><span>产品中心</span></div>
            </div>
            <div class="swiper-container-box">
                <!-- Swiper -->
                <div class="swiper-container product-container">
                    <div class="swiper-wrapper  origin">
                        <div class="swiper-slide" th:each="item:${products}">
                            <a th:href="@{'/'+${language}+'/productDetail/'+${item.id}}" target="_blank" class="swiper-item">
                                <img th:src="${item.indexImg}" alt="">
                                <!--                                <div class="swiper-item-label">Name of commodity</div>-->
                            </a>
                        </div>

                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next product-next"></div>
                    <div class="swiper-button-prev product-prev"></div>
                </div>
                <!-- Swiper JS -->
            </div>

        </div>
        <div class="company-profile-box">
            <div class="title" th:text="${pc.title}">
                Company Profile
            </div>
            <div class="profile">
                <div class="left">
                    <div th:utext="${pc.content}">Guangdong Huayi Technology co., LTD. Was established in March 2006, with splendor cloud
                        business technology co. LTD., guangdong dongguan kam 'intelligent technology co., LTD., is
                        located in China's reform and opening up the frontier city - DaLang town, dongguan city, is
                        a collection of textiles, clothing, intelligent machinery development and production and
                        sales in the integration of national high-tech enterprises, have rich experience in
                        enterprise management and a complete and scientific quality management system. The company's
                        stock has been listed and traded in the national sme share transfer system on March 25,
                        2016, stock code: 836963.</div>
                    <div class="more" >
                        <a th:href="@{'/'+${language}+'/aboutUs'}" th:text="*{language.equals('en')} ? 'MORE>>' : '更多>>'"></a>
                    </div>
                </div>
                <div class="right">
                    <img th:src="${pc.image}" alt="">
                    <img th:src="${pc.image1}" alt="">
                </div>
            </div>
        </div>

        <div class="company-profile-box news-box">
            <div class="title" th:text="*{language.equals('en')} ? 'NEWS  CENTER' : '新闻中心'">
                NEWS  CENTER
            </div>
            <div class="home-news-list">
                <a th:href="@{'/'+${language}+'/newsDetail/'+${item.id}}" class="news-item" th:each="item :${newsList}">
                    <img th:src="${item.getImgUrl()}" >
                    <div class="news-detail-box">
                        <div class="news-title" th:text="${item.getTitle()}">
                            The 18th China (Shanghai) Devices Exhibition 2016
                        </div>
                        <div class="news-time" th:text="${#dates.format(item.getStartTime(), 'yyyy-MM-dd')}">
                            2020-03-20
                        </div>
                        <div class="news-desc" th:utext="${item.getContent()}">
                            CMEH  has been successfully held seventeen sessions, after years of development, has become one of the largest international medical equipment exhibition. The exhibition widely covers medical electronics and medical imaging equipment, wards and auxiliary equipment,
                        </div>
                    </div>
                </a>
            </div>
            <div class="more">
                <a th:href="@{'/'+${language}+'/news'}" th:text="*{language.equals('en')} ? 'MORE>>' : '更多>>'">MORE>></a>
            </div>
        </div>
    </div>
    <script>
        // pc端
        if((/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))) {
            slidesPerView = 1
        } else {
            slidesPerView = 3
        }
        var swiper = new Swiper('.product-container', {
            pagination: '.product-pagination',
            clickable: true,
            nextButton: '.product-next',
            prevButton: '.product-prev',
            slidesPerView: slidesPerView,
            paginationClickable: true,
            loop:true
        });
    </script>

</div>

</body>

</html>